import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
    Spin, Row, Col, Card, Form, Input,
    Select, Icon, Button, Dropdown, Menu,
    InputNumber, DatePicker, Modal, message,
    Badge, Table, Divider, Tag, Tree, Upload,
    Radio
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';

import Zmage from 'react-zmage';
import styles from './InquiryDetails.less';
import { routerRedux } from 'dva/router';
import querystring from 'querystring';
const RadioGroup = Radio.Group;
const TreeNode = Tree.TreeNode;
const { TextArea } = Input;
const { Description } = DescriptionList;
/*
 申请管理征信查询的详情征-信详情界面
*/

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ queries }) => ({
    queries,
}))
@Form.create()
export default class InquiryDetails extends PureComponent {

    state = {
        id: '',
        updateTime: '',
        radioValue: null,
        previewVisible: false,
        previewImage: '',
        note: '',
        imgUrl: '',
        // isFlag: false,
        fileList: [],

        imageRotateDeg: 0,
        enlarge: 1,
    };

    componentDidMount() {
        const { dispatch, location } = this.props;
        const params = querystring.parse(location.search.slice(1));

        this.setState({
            id: params.id,
        });
        dispatch({
            type: 'queries/show',
            payload: {
                id: params.id,
            },
            callback: () => {
                const { queries: { inquiryList } } = this.props;
                let fileList = this.state.fileList;

                inquiryList.img1 &&
                    fileList.push({
                        uid: inquiryList.img1,
                        name: 'xxx.png',
                        status: 'done',
                        url: inquiryList.img1,
                    });
                inquiryList.img2 &&
                    fileList.push({
                        uid: inquiryList.img2,
                        name: 'xxx.png',
                        status: 'done',
                        url: inquiryList.img2,
                    });
                inquiryList.img3 &&
                    fileList.push({
                        uid: inquiryList.img3,
                        name: 'xxx.png',
                        status: 'done',
                        url: inquiryList.img3,
                    });
                inquiryList.img4 &&
                    fileList.push({
                        uid: inquiryList.img4,
                        name: 'xxx.png',
                        status: 'done',
                        url: inquiryList.img4,
                    });
                inquiryList &&
                    this.setState({
                        fileList: fileList,
                        // isFlag: true,
                        radioValue: inquiryList.result,
                        note: inquiryList.note,
                        updateTime: inquiryList.updateTime
                    })

            },
        });
    }
    handleCancel = () => {
        this.setState({
            previewVisible: false,
            enlarge: 1
        })
    }
    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
            imageRotateDeg: 0,
        });
    }

    handleChange = ({ fileList }) => this.setState({ fileList })

    onSelect = (selectedKeys, info) => {
        // console.log('selected', selectedKeys, info);
    }

    onChange = (e) => {
        // console.log('radio checked', e.target.value);
        this.setState({
            radioValue: e.target.value,
        });
    }

    handleTextAreaChange = (e) => {
        this.setState({
            note: e.target.value
        })
    }

    // setIsFlagState = () => {
    //     this.setState({
    //         isFlag: true
    //     })
    // }

    onSubmit = (e) => {
        if (this.state.id && this.state.radioValue && this.state.note && this.state.updateTime) {
            this.props.dispatch({
                type: 'queries/updata',
                payload: {
                    id: this.state.id,
                    result: this.state.radioValue,
                    note: this.state.note,
                    updateTime: this.state.updateTime,
                },
                callback: () => {
                    this.props.dispatch(routerRedux.push('/reporting/credit-reporting-queries'));
                },
            });
        } else {
            message.warning("请先填写完毕")
        }
    }

    handleRotate = () => {
        this.setState({
            imageRotateDeg: this.state.imageRotateDeg + 90,
        });
    }
    handleAmplification = () => {
        if (this.state.enlarge >= 2) {
            message.warning("不能再放大了")
        } else {
            this.setState({
                enlarge: this.state.enlarge * 2,
            })
        }
    }
    handleNarrow = () => {
        if (this.state.enlarge <= 1) {
            message.warning("不能再缩小了")
        } else {
            this.setState({
                enlarge: this.state.enlarge * 0.5,
            })
        }
    }


    render() {
        // const list = this.props.loan.data.list;
        const { queries: { inquiryList, loading } } = this.props;
        const { queries } = this.props;
        const { previewVisible, previewImage, fileList } = this.state;
        const imgWidth = 500 * this.state.enlarge;
        const imgHeight = 500 * this.state.enlarge;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        return (
            <PageHeaderLayout title="征信详情">
                {/* {JSON.stringify(inquiryList)} */}
                <Row>
                    {//this.state.fileList.length>0 ?
                        // this.state.isFlag ?
                            <Card
                                bordered={false}
                            >
                                {/* aaa{JSON.stringify(inquiryList)}zzz */}

                                <Form>
                                    <Row style={{ marginTop: 20 }}>
                                        <DescriptionList size="small" col="2" className={styles.descriptionList}>

                                            <Description
                                                term="姓名"
                                                style={{ marginLeft: 5 }}
                                            > {inquiryList.custname}
                                            </Description>

                                            <Description
                                                term="证件号码"
                                                style={{ marginLeft: -40 }}
                                            >
                                                {inquiryList.idno}
                                            </Description>

                                        </DescriptionList>
                                    </Row>

                                    <Row style={{ marginTop: 20 }}>
                                        <DescriptionList size="small" col="2">
                                            <Description  >
                                                <Col span={12} style={{ textAlign: 'right' }}>
                                                    身份证正面照：
                                                </Col>
                                                <Col span={3} style={{ float: 'left' }}>
                                                    <div className="clearfix">
                                                        <Upload
                                                            // action="//jsonplaceholder.typicode.com/posts/"
                                                            listType="picture-card"
                                                            fileList={this.state.fileList.length > 3 ? [this.state.fileList[0]] : []}
                                                            onPreview={this.handlePreview}
                                                            onChange={this.handleChange}
                                                            showUploadList={{ showRemoveIcon: false }}
                                                        >
                                                            {/* {fileList.length >= 1 ? null : uploadButton} */}
                                                        </Upload>
                                                    </div>
                                                </Col>
                                            </Description>
                                            <Description >
                                                <Col span={12} style={{ textAlign: 'right' }}>
                                                    身份证反面照：
                                                </Col>
                                                <Col span={3} style={{ float: 'left' }}>
                                                    <div className="clearfix">
                                                        <Upload
                                                            // action="//jsonplaceholder.typicode.com/posts/"
                                                            listType="picture-card"
                                                            fileList={this.state.fileList.length > 3 ? [this.state.fileList[1]] : []}
                                                            onPreview={this.handlePreview}
                                                            onChange={this.handleChange}
                                                            showUploadList={{ showRemoveIcon: false }}
                                                        >
                                                            {/* {fileList.length >= 1 ? null : uploadButton} */}
                                                        </Upload>
                                                    </div>
                                                </Col>
                                            </Description>
                                        </DescriptionList>
                                    </Row>
                                    <Row style={{ marginTop: 20 }}>

                                        <DescriptionList size="small" col="2">
                                            <Description  >
                                                <Col span={13} style={{ textAlign: 'right' }}>
                                                    客户签字照：
                                                </Col>
                                                <Col span={3} style={{ float: 'left' }}>
                                                    <div className="clearfix">
                                                        <Upload
                                                            // action="//jsonplaceholder.typicode.com/posts/"
                                                            listType="picture-card"
                                                            fileList={this.state.fileList.length > 3 ? [this.state.fileList[2]] : []}
                                                            onPreview={this.handlePreview}
                                                            onChange={this.handleChange}
                                                            showUploadList={{ showRemoveIcon: false }}
                                                        >
                                                            {/* {fileList.length >= 1 ? null : uploadButton} */}
                                                        </Upload>
                                                    </div>
                                                </Col>
                                            </Description>
                                            <Description >
                                                <Col span={13} style={{ textAlign: 'right' }}>
                                                    客户授权书：
                                                </Col>
                                                <Col span={3} style={{ float: 'left' }}>

                                                    <div className="clearfix">
                                                        <Upload
                                                            // action="//jsonplaceholder.typicode.com/posts/"
                                                            listType="picture-card"
                                                            fileList={this.state.fileList.length > 3 ? [this.state.fileList[3]] : []}
                                                            onPreview={this.handlePreview}
                                                            onChange={this.handleChange}
                                                            showUploadList={{ showRemoveIcon: false }}
                                                        >
                                                            {/* {fileList.length >= 1 ? null : uploadButton} */}
                                                        </Upload>
                                                    </div>
                                                </Col>
                                            </Description>
                                        </DescriptionList>
                                    </Row>

                                    <Row style={{ marginTop: 20, marginLeft: 35 }} >
                                        <DescriptionList col="1">
                                            <Description term="征信结果">
                                                <Row>
                                                    <RadioGroup onChange={this.onChange} value={this.state.radioValue}>
                                                        <Radio value={1}>正常</Radio>
                                                        <Radio value={2}>关注</Radio>
                                                        <Radio value={3}>禁入</Radio>
                                                    </RadioGroup>
                                                </Row>
                                            </Description >
                                        </DescriptionList>
                                    </Row>
                                    <Row style={{ marginTop: 20, marginBottom: 20, marginLeft: 35, width: '70%' }}>
                                        <DescriptionList col="1">
                                            <Description term="征信意见">
                                                <Row>
                                                    <TextArea placeholder="请输入征信意见" rows={4} value={this.state.note} onChange={this.handleTextAreaChange} />
                                                </Row>
                                            </Description >
                                        </DescriptionList>
                                    </Row>
                                </Form>
                                <Row>
                                    <Button
                                        style={{ marginTop: 20, marginLeft: 50 }}
                                        type="primary"
                                        onClick={this.onSubmit}
                                        loading={queries.sumbitLoading}
                                    >
                                        提交
                                    </Button>
                                </Row>
                            </Card>
                            // :
                            // <div className={styles.spinContainer}>
                            //     <Spin size="large" />
                            //     {/* {this.setIsFlagState} */}
                            // </div>
                    }
                </Row>

                <Modal
                    width={imgWidth + 40}
                    visible={previewVisible}
                    footer={null}
                    onCancel={this.handleCancel}>
                    <div style={{ justifyContent: 'space-around', display: 'flex' }}>
                        <img alt="example"
                            style={{
                                width: imgWidth,
                                height: imgHeight,
                                transform: `rotate(${this.state.imageRotateDeg}deg)`
                            }}
                            src={previewImage}
                        />
                    </div>
                    <Row type="flex" justify="space-around" style={{
                        marginTop: 25,
                    }} >
                        <Button onClick={this.handleRotate}>旋转</Button>
                        <Button onClick={this.handleAmplification}>放大</Button>
                        <Button onClick={this.handleNarrow}>缩小</Button>
                    </Row>
                </Modal>
            </PageHeaderLayout>
        );
    }
}